<template>
  <div class="user-box">
    <div class="user-info">
      <el-card class="box-card">
        <div class="header-img">
          <img :src=" user.headImage" style="width: 80px;height:80px;border-radius: 50%" alt="头像">
          <el-divider/>
        </div>
        <div>
          <el-descriptions title="个人信息" :column="1" size="small" border>
            <el-descriptions-item label="姓名">{{ user.userName }}</el-descriptions-item>
            <el-descriptions-item label="昵称">{{ user.nickName }}</el-descriptions-item>
            <el-descriptions-item label="账号">{{ user.account }}</el-descriptions-item>
            <el-descriptions-item label="性别">{{ user.sex === 1 ? '男生' : '女生' }}</el-descriptions-item>
            <el-descriptions-item label="出生日期">{{ user.birthday.split(' ')[0] }}</el-descriptions-item>
            <el-descriptions-item label="家庭住址">
              {{ user.address }}{{ user.addressDetail }}
            </el-descriptions-item>
            <el-descriptions-item label="联系电话">{{ user.phone }}</el-descriptions-item>
            <el-descriptions-item label="电子邮箱">{{ user.email }}</el-descriptions-item>
          </el-descriptions>
        </div>
      </el-card>
    </div>
    <div class="user-edit">
      <el-card class="box-card">
        <div slot="header" class="clearfix">
          <span>编辑个人信息</span>
          <el-button style="float: right; padding: 3px 0" type="text" @click="saveInfo" :loading="saveLoading">
            {{ saveMsg }}
          </el-button>
        </div>
        <div>
          <el-form ref="form" :model="userInfoForm" label-width="80px" size="small">
            <el-form-item label="姓名">
              <el-input v-model="userInfoForm.userName" placeholder="请输入姓名" maxlength="10" clearable></el-input>
            </el-form-item>
            <el-form-item label="昵称">
              <el-input v-model="userInfoForm.nickName" placeholder="请输入昵称" maxlength="20" clearable></el-input>
            </el-form-item>
            <el-form-item label="性别">
              <el-radio v-model="userInfoForm.sex" :label="1">男生</el-radio>
              <el-radio v-model="userInfoForm.sex" :label="0">女生</el-radio>
            </el-form-item>
            <el-form-item label="家庭住址">
              <el-input v-model="userInfoForm.address" placeholder="xx省xx市xx县(区)" maxlength="50"
                        clearable></el-input>
            </el-form-item>
            <el-form-item label="详细住址">
              <el-input v-model="userInfoForm.addressDetail" type="textarea"
                        placeholder="请输入家庭详细住址" maxlength="100" clearable></el-input>
            </el-form-item>
            <el-form-item label="出生日期">
              <el-date-picker
                v-model="userInfoForm.birthday"
                value-format="yyyy-MM-dd"
                type="date"
                clearable
                placeholder="选择出生日期">
              </el-date-picker>
            </el-form-item>
            <el-form-item label="联系电话">
              <el-input v-model="userInfoForm.phone" placeholder="请输入联系电话" maxlength="20" clearable></el-input>
            </el-form-item>
            <el-form-item label="电子邮箱">
              <el-input v-model="userInfoForm.email" placeholder="请输入电子邮箱" maxlength="20" clearable></el-input>
            </el-form-item>
          </el-form>
        </div>
      </el-card>
    </div>
  </div>
</template>

<script>
import { editUserById, getUserInfo } from '@/api/mine'

export default {
  // eslint-disable-next-line vue/multi-word-component-names
  name: 'Mine',
  data () {
    return {
      saveLoading: false,
      saveMsg: '保存',
      userInfoForm: {},
      user: {}
    }
  },
  created () {
    this.getUserInfoData()
  },
  methods: {
    /* *
    * 保存用户信息
    *  */
    saveInfo () {
      this.saveLoading = true
      this.saveMsg = '正在保存'
      editUserById(this.userInfoForm).then(res => {
        console.log(res)
      }).finally(() => {
        this.saveLoading = false
        this.saveMsg = '保存'
        // this.getUserInfoData()
      })
    },
    /* *
    * 获取用户信息
    *  */
    getUserInfoData () {
      getUserInfo(window.sessionStorage.getItem('userId')).then(res => {
        this.userInfoForm = res.data
        this.user = res.data
      })
    }
  }
}
</script>

<style lang="less" scoped>
.user-box {
  display: flex;
  height: 100%;

  .user-info {
    width: 38%;
    height: 100%;

    .header-img {
      width: 100%;
      display: flex;
      align-items: center;
      flex-direction: column;
    }
  }

  .user-edit {
    width: 62%;
    height: 100%;
    margin-left: 20px;
  }
}

.box-card {
  height: 100%;
}
</style>
